import React from "react"
import { NativeRouter, Switch } from "react-router-native"
import { Route } from "react-router-dom"
import { View } from "react-native"
import { Provider } from "mobx-react"
import { RootStoreModel } from "../models/root-store"
import routes from "./routes"

let rootStore = RootStoreModel.create({})

function RouteWithSubRoutes(route: any) {
  return (
    <Route
      path={route.path}
      render={(props: any) => <route.component {...props} routes={route.routes} />}
    />
  )
}

export class AppRouter extends React.Component {
  render() {
    return (
      <Provider rootStore={rootStore}>
        <NativeRouter>
          <View style={{ flex: 1 }}>
            <Switch>
              {routes.map((route, i) => (
                <RouteWithSubRoutes key={i} {...route} />
              ))}
            </Switch>
          </View>
        </NativeRouter>
      </Provider>
    )
  }
}

export default AppRouter
